<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <div :class="['panel',{'no-body':noBody}]">
        <div
            class="header"
            v-if="label">
            <div class="label">{{ label }}</div>
        </div>
        <template v-if="!noBody">
            <slot name="body">
                <div class="body"><slot/></div>
            </slot>
        </template>
        <slot name="footer">
            <!--<div class="footer">&lt;!&ndash;预留&ndash;&gt;</div>-->
        </slot>
    </div>
</template>

<script>
export default {
    name: 'Panel',
    data() {
        return {};
    },
    props: {
        label: {
            type: String,
            default: '',
        },
        noBody: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.panel {
    background-color: #fff;
    margin: $margin 0;
    border: 1px solid $color-border;
    > .header {
        position: relative;
        padding: (50px - 26)/2 0;
        > .label {
            line-height: 26px;
            font-size: 20px;
            border-left: 4px solid $color-main;
            padding: 0 $padding-big;
        }
        &:after {
            position: absolute;
            left: $padding-big;
            right: $padding-big;
            bottom: 0;
            content: '';
            display: block;
            height: 1px;
            background-color: $color-border;
        }
    }
    > .body {
        padding: $padding-big;
    }
    > .footer {
        position: relative;
        padding: $padding-big;

        &:before {
            position: absolute;
            left: $padding-big;
            right: $padding-big;
            top: 0;
            content: '';
            display: block;
            height: 1px;
            background-color: $color-border;
        }
    }

    &.no-body {
        > .header {
            &:after {
                display: none;
            }
        }
    }
}
</style>
